import * as React from 'react';
import * as PropTypes from 'prop-types';
import { useEffect, useState } from 'react';

export interface Test2Props {}

const HOC = (WrapperComponent: React.ComponentClass) =>
  class extends React.Component<any, any> {
    static displayName = 'WrapperComponent';

    render() {
      const { ...resetProps } = this.props;
      return (
        <div style={{ border: '1px solid green', padding: 20 }}>
          <div>当前主题：</div>
          <WrapperComponent {...resetProps} />
        </div>
      );
    }
  };

const Red = HOC(
  class extends React.Component<any, any> {
    render() {
      return <div>Hello</div>;
    }
  }
);

@HOC
@HOC
@HOC
class Test2 extends React.Component<Test2Props, any> {
  public static propTypes = {};
  public static defaultProps = {};

  public render() {
    return (
      <div>
        <Red />
      </div>
    );
  }
}

export default Test2;

const UserPanel = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // componentDidMount
    return () => {
      // ComponentWillUnmount
    };
  }, []);

  useEffect(() => {
    // render
  });

  useEffect(() => {
    console.log('useEffect');
  }, [count]);

  return <div>hello</div>;
};
